<template>
  <tm-app color="#F5F3EF">
    <Navbar hideMode />
    <template v-if="isShowPersonalInfo && isActivateMember">
        <view class="fate-index-spacer">
          <FateIndex />
        </view>
    </template>
    <template v-else>
      <PersonalInfoUpdate />
    </template>
    <VipModal v-model:show="vipModalShow" />

    <Tabbar />
  </tm-app>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import Navbar from '@/components/navbar/index.vue';
import PersonalInfoUpdate from './components/PersonalInfo/PersonalInfoUpdate.vue'
import VipModal from './components/VipModal/VipModal.vue'
import { isEmpty } from "lodash";
import { useUserStore } from "@/stores/user.ts";
import FateIndex from './components/FateIndex/FateIndexView.vue'
import Tabbar from '@/components/tabbar/index.vue'

const vipModalShow = computed(()=>{
  return !isActivateMember.value && isShowPersonalInfo.value
});

const userStore = useUserStore();

const isActivateMember = computed(() => {
  return userStore.isActivateMember
})

const isShowPersonalInfo = computed(() => {
  return !isEmpty(userStore.userInfo)
})
</script>

<style lang="less" scoped>
.app {
  padding-bottom: 60rpx;
}

.fate-index-spacer {
  margin-top: 30rpx;
}
</style>
